<script setup>
import { useI18n } from "vue-i18n";
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
const { t } = useI18n();

const story = ref(null);
const getStory = async () => {
  try {
    const res = await axios.get(`${apiUrl}/pc/get_news_detail/20`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      story.value = res.data.data;
    }
  } catch (e) {}
};

onMounted(() => {
  getStory();
});
</script>

<template>
  <div class="middle" v-if="story">
    <div class="brand">
      <div class="videoBox">
        <video
          class="video"
          :src="story.image_input[0]"
          controls
          autoplay
          preload="metadata"
        ></video>
      </div>
      <div class="info">
        <h3 class="title">{{ t("common.brandStory") }}</h3>
        <p class="desc">{{ t("common.about") }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.brand {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 140px;
  padding: 70px 0 100px 0;
}
.videoBox {
  flex: 0 0 640px;
}
.video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.info {
  flex: 1;
}
.title {
  font-size: 32px;
  font-weight: 400;
  line-height: 46px;
  color: #111;
  margin: 4px 0 16px;
}
.desc {
  color: rgba(108, 108, 108, 1);
  font-size: 14px;
  line-height: 40px;
}
</style>
